<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>太极</title>
			<style type="text/css">
			
				.div1{
					width: 200px;
					height: 100px;
					border-radius: 200px 200px 0 0;
					background-color: black;
				}
				.div2{
					width: 200px;
					height: 100px;
					border-radius: 0 0 200px 200px ;
					background-color: white;
				}
				.div3{
					width: 100px;
					height: 100px;
					border-radius: 50%;
					background-color: black;
					position: absolute;
					left: px;
					top: 50px;
				}
				.div4{
					width: 100px;
					height: 100px;
					border-radius: 50%;
					background-color: white;
					position: absolute;
					left: 100px;				;
					top: 50px;
				}
				.div5{
					width: 30px;
					height: 30px;
					border-radius: 50%;
					background-color: white;
					position: absolute;
					left: 40px;				;
					top: 40px;
					
				}
				.div6{
					width: 30px;
					height: 30px;
					border-radius: 50%;
					background-color: black;
					position: absolute;
					left: 40px;				;
					top: 40px;
					
				}
				.divwai{
					width: 200px;
					height: 200;
					
					left: 10px;
					top: 100px;
					border-radius: 50%;
					box-shadow: 10px 10px 20px;
					position: absolute;
					top:200px;
					right: 100px;
					
					left: 100px;
				
					
				}
			</style>
		
	</head>
	<body>
		<div class="divwai">
			<div class="div1">
			    <div class="div3">
				    <div class="div5"></div>
			    </div>
		    </div>
		    <div class="div2">
			    <div class="div4">
				    <div class="div6"></div>
			    </div>
		
		    </div>
		</div>
		<button onclick="Divleft(10)">向右移动</button>
		<button onclick="Divleft(-10)">向左移动</button>
		<button onclick="Divtop(10)">向下移动</button>
		<button onclick="Divtop(-10)">向上移动</button>
		<script type="text/javascript">
		var l=100;
		var t=100;
		function Divleft(arg){			
			var tj = document.querySelector(".divwai")			
			l= l+arg;
			tj.style.left=l+"px";
			
		}	
		function Divtop(x){
			
			var tj = document.querySelector(".divwai")
			l=l+x;
			tj.style.top=l+"px";
			
		}	
		
		
		</script>
		
	</body>
</html>
